<!-- 队伍设置详情   邀请队友,设置队伍详情 -->
<template>
	<view class="item-block">
		<u-tabs :list="list" lineWidth="130" lineColor="#de3600" @click="clicktab"></u-tabs>
		<view class="player_item" v-if="ids==1">
			<view class="form-but">
				<u-button icon="plus-circle" type="primary" text="添加球员" @click="addplayer"></u-button>
			</view>
			<view class="player_detail">
				<view class="detail_list_item" v-for="(item,index) in datalist" :key='index'>
					<view class="">
						<u-avatar :src="item.avatarUrl" size="30"></u-avatar>
					</view>
					<view class="item_name">
						{{item.nickName}}
					</view>
					<view class="">
						{{item.insertTime}}
					</view>
					<view class="">
						加入队伍
					</view>

				</view>
			</view>
			<view class="order_detail">
				<view class="title">
					分享订单
				</view>

				<view class="ranking_table">

					<view class="table_right">
						<uni-table ref="table" :loading="loading" border emptyText="暂无订单信息">
							<uni-tr>
								<uni-th width="200" align="center">支付时间</uni-th>
								<uni-th width="80" align="center">状态</uni-th>
								<uni-th width="80" align="center">金额</uni-th>
							</uni-tr>

							<uni-tr v-for="(item, index) in sharelist" :key="index">
								<uni-td>{{ item.payTime }}</uni-td>
								<uni-td>{{ item.checkNum }}/{{ item.memberNum }}</uni-td>
								<uni-td>{{ item.totalFee }}元</uni-td>
							</uni-tr>
						</uni-table>
					</view>
					<view class="table_left">
						<uni-table ref="table" :loading="loading" border emptyText="无">
							<uni-tr>
								<uni-th align="center">操作</uni-th>
							</uni-tr>

							<uni-tr v-for="(item, index) in sharelist" :key="index">
								<uni-td @click.native="tableitem(item.orderId)"><span
										style="color:red;">分享</span></uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
			</view>
		</view>

		<view class="team_item" v-else>
			<view class="two_item">
				<view class="right_info">
					<u--form labelPosition="left" ref="uForm" labelWidth='80'>
						<view class="title">
							队伍信息
						</view>
						<u-form-item label="队伍名称" borderBottom ref="item1">
							<u--input v-model="formobj.teamName" border="none"></u--input>
						</u-form-item>
						<u-form-item label="组队方式" borderBottom ref="item1">
							<uni-section>
								<uni-data-select v-model="formobj.teamType" :localdata="range"
									:clear="false"></uni-data-select>
							</uni-section>
						</u-form-item>
						<u-form-item label="队伍介绍" borderBottom ref="item1">
							<u--textarea v-model="formobj.teamDesc" placeholder="请输入内容" autoHeight></u--textarea>
						</u-form-item>
					</u--form>
				</view>
			</view>
			<view class="three_item">
				<view class="right_info">
					<u--form labelPosition="left" ref="uForm" labelWidth='80'>
						<view class="title">
							队伍标志
						</view>
						<view class="upload_item">
							<view class="logo_item" :style="{ backgroundImage: 'url(' + formobj.teamLogo + ')' }">
								<view class="iconfont icon-xiangji">
								</view>
							</view>
							<view class="logo_title">
								点击上传队伍标志
							</view>
						</view>
					</u--form>
				</view>
			</view>
			<view class="form-but">
				<u-button type="primary" text="保存" @click="submit"></u-button>
			</view>
		</view>
		<u-modal :show="show" :title="title">
			<view class="slot-content item" style="width: 100%;">
				<view class="" style="display: flex; justify-content: space-between; width: 100%;">
					<view class="item_two">
						是否支付队友费用
					</view>
					<view class="item_three">
						<u-radio-group size='18' @change='changecheckbox' placement="row" v-model="radiovalue">
							<u-radio name='1' label="是" activeColor="#de3600"></u-radio>
							<u-radio name='2' label="否" activeColor="#de3600"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="" v-if="switchvalue" style="display: flex; justify-content: space-between;">
					<view class="item_two">
						队友人数
					</view>
					<view class="item_three">
						<u-number-box v-model="value" min="1" max="3" @change='changevalue'>
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<text slot="input" style="width: 50px;text-align: center;" class="input">{{value}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#fff" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
				<view class="" style="display: flex; justify-content: space-between; width: 100%;" v-if="switchvalue">
					<view class="item_two">
						需支付金额
					</view>
					<view class="item_three">
						{{moneyvalue}}元
					</view>
				</view>

				<view class="item_four">

				</view>
			</view>
			<u-button slot="confirmButton" text="取消" class="butone" type="success" shape="circle"
				@click="cancel"></u-button>
			<u-button slot="confirmButton" text="确定" class="buttwo" type="success" shape="circle"
				@click="sure"></u-button>

		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue: '2',//默认不支付队友费用
				switchvalue: false,//支付金额模块显示
				formobj: {
					teamId: '',
					teamName: "",
					teamType: "",
					teamDesc: "",
					teamLogo: ''
				},
				range: [{
						value: 1,
						text: "公开"
					},
					{
						value: 2,
						text: "私密"
					},

				],
				ids: 1,//模块切换
				list: [{
					id: 1,
					name: '球员管理',
				}, {
					id: 2,
					name: '队伍信息',
				}, ],
				datalist: [],//成员加入队伍列表
				show: false,
				value: 1,//默认支付人数
				idobj: {},
				orderid: '',
				moneyvalue: '',//金额
				sharelist: [],//分享订单列表
			}
		},
		created() {

		},

		onLoad(options) {
			// 从路由参数中获取传递的值
			this.idobj = JSON.parse(decodeURIComponent(options.id))
			this.formobj.teamId = this.idobj.teamId
			this.formdetail()
			this.shareorders()
			this.dataarr()
		},
		mounted() {



		},
		methods: {
			// 请求成员加入队伍列表
			dataarr() {
				const that = this
				this.$request(`/race/getSharePlayers/${this.idobj.teamId}`, 'get')
					.then(
						res => {
							that.datalist = res.data.data
						})
			},
			// 用户切换是否支付
			changecheckbox(e) {
				if (e == 1) {
					this.switchvalue = true
					// 请求金额显示
					this.getEntryFree()
				} else {
					this.switchvalue = false
				}
			},
			// 用户添加用户重新请求金额数
			changevalue(e) {
				this.value = e.value
				this.getEntryFree()
			},
			getEntryFree() {
				const that = this
				this.$request(`/race/getEntryFree/${this.idobj.raceId}/${this.value}`, 'get')
					.then(
						res => {
							that.moneyvalue = res.data.data
						})
			},
			//分享列表中的分享
			tableitem(e) {
				const obj = {
					type: 888,
					orderId: e,
					teamId: this.idobj.teamId,
					raceId: this.idobj.raceId,
					teamName: this.formobj.teamName,
					placeName: this.formobj.placeName,
					teamLogo: this.formobj.teamLogo
				}
				const objStr = JSON.stringify(obj);
				uni.navigateTo({
					url: '/subpackage1/eventpage/share_page?id=' + encodeURIComponent(objStr)
				});
			},
			// 分享列表数据
			shareorders() {
				const that = this
				this.$request(`/race/shareOrders/${this.idobj.raceId}`, 'get')
					.then(
						res => {
							that.sharelist = res.data.data
						})
			},
			// 点击确定判断是否需要支付1是2否
			// 传参type用来判断用户点击链接进小程序之后是否需要支付,999为用户需要自己支付,888为不需要支付
			sure() {
				if (this.radiovalue == 2) {
					const obj = {
						type: 999,
						teamId: this.idobj.teamId,
						raceId: this.idobj.raceId,
						teamName: this.formobj.teamName,
						placeName: this.formobj.placeName,
						orderId: '',
						teamLogo: this.formobj.teamLogo
					}
					const objStr = JSON.stringify(obj);
					uni.navigateTo({
						url: '/subpackage1/eventpage/share_page?id=' + encodeURIComponent(objStr)
					});
				} else {


					const that = this
					const data = {
						raceId: Number(this.idobj.raceId),
						teamId: Number(this.idobj.teamId),
						memberNum: this.value
					}
					this.$request(`/race/addPlayers`, 'POST', data)
						.then(
							res => {
								if (res.data.data.flag) {
									that.orderid = res.data.data.orderId
									that.gopayment()
								} else {
									const userinfo = uni.getStorageSync('userinfokey')
									if (!userinfo.token) {
										that.$refs.uToast.show({
											type: 'error',
											message: "请先登录",
											iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

										})
										uni.navigateTo({
											url: '/subpackage1/myhome/myhome'
										});
										return
									}


								}
							})


				}

				this.radiovalue = 2
				this.show = false
				this.value = 1
			},
			// 支付api
			gopayment() {
				const that = this
				const data = {
					id: this.orderid,
					orderType: 3,
				}
				this.$request(`/order/preGenerate`, 'POST', data)
					.then(
						res => {
							uni.requestPayment({
								timeStamp: res.data.data.timeStamp, // 时间戳
								nonceStr: res.data.data.nonceStr, // 随机字符串
								package: res.data.data.packageVal, // 预支付交易会话标识
								signType: res.data.data.signType, // 签名方式
								paySign: res.data.data.paySign, // 签名
								success(res) {
									// 支付成功回调
									that.$refs.uToast.show({
										type: 'success',
										message: "支付成功",
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',

									})
									const obj = {
										type: 888,
										orderId: that.orderid,
										teamId: that.idobj.teamId,
										raceId: that.idobj.raceId,
										teamName: that.formobj.teamName,
										placeName: that.formobj.placeName,
										teamLogo: that.formobj.teamLogo
									}
									const objStr = JSON.stringify(obj);
									uni.navigateTo({
										url: '/subpackage1/eventpage/share_page?id=' + encodeURIComponent(objStr)
									});
									that.shareorders()
								},
								fail(res) {
									// 支付失败回调
									that.$refs.uToast.show({
										type: 'error',
										message: "支付失败",
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

									})
								}
							});
						})
			},
			// 用户点击需要添加球员弹窗
			cancel() {
				this.show = false
				this.value = 1
			},
			//添加球员按钮
			addplayer() {
				this.show = true
				this.radiovalue = '2'
				this.switchvalue = false
			},
			// 切换模块
			clicktab(e) {
				this.ids = e.id
			},
			// 队伍信息提交按钮
			submit() {
				const that = this
				this.$request(`/race/editTeam`, 'POST', this.formobj)
					.then(
						res => {
							if (res.data.data) {
								uni.showToast({
									title: '修改成功',
									icon: 'success'
								});
							}
						})
			},
			// 队伍信息详情
			formdetail() {
				const that = this
				this.$request(`/race/teamDetail/${this.formobj.teamId}`, 'get')
					.then(
						res => {
							that.formobj.teamType = res.data.data.teamType
							that.formobj.teamDesc = res.data.data.teamDesc
							that.formobj.teamLogo = res.data.data.teamLogo
							that.formobj.teamName = res.data.data.teamName
							that.formobj.placeName = res.data.data.placeName
						})
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-block {
		height: calc(100vh);
		background-color: #f4f4f4;
		position: relative;

		::v-deep .u-modal__button-group--confirm-button {
			flex-direction: row !important;

		}

		.item_two {
			text-align: center;
			margin-bottom: 10px;
		}

		.item_three {
			.minus {
				// background-color: #2bc71a;
				padding: 5px;
				border-radius: 13px;
				border: 1px solid #afafaf;
			}

			.plus {
				background-color: #de3600;
				padding: 5px;
				border-radius: 13px;
			}


		}

		::v-deep .u-modal__button-group--confirm-button .u-button:first-child {
			background-color: #fff !important;
			color: #de3600;
			border: 1px solid #de3600 !important;
			width: 35%;
		}

		::v-deep .u-modal__button-group--confirm-button .u-button:last-child {
			background-color: #de3600 !important;
			border: 0px !important;
			width: 60%;
		}

		.form-but {
			margin-top: 20px;

			::v-deep .u-button {
				width: calc(100vw - 40px);
				border-radius: 25px;
				border: 0px;
				background-color: #de3600;
				height: 47px;
			}
		}

		::v-deep .u-tabs__wrapper__nav__item {

			width: calc(50% - 22px) !important;
		}

		.player_item {
			height: calc(100vh - 54px);
			padding-top: 10px;

			.player_detail {
				height: 50%;

				.detail_list_item {
					padding: 10px 15px;
					display: flex;
					border-radius: 8px;
					align-items: center;
					font-size: 14px;
					justify-content: space-between;

					.item_name {
						width: 60px;
						white-space: nowrap;
						/* 防止文字换行 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}

					.icon-error-1 {
						color: #de3600;
						font-size: 22px;

					}

				}
			}

			.order_detail {
				border-radius: 20px 20px 0 0;
				background-color: #fff;
				height: calc(50% - 67px);
				padding: 0 20px;
				

				.title {
					padding-top: 10px;
					font-size: 17px;
					font-weight: 600;
					margin-bottom: 10px;
				}


				::v-deep .uni-table-td,
				::v-deep .empty-border,
				::v-deep .uni-table-th,
				::v-deep .table--border {

					border: 0 !important;

				}

				.ranking_table {
					display: flex;
					height: calc(100% - 42px);
overflow: auto;
					::v-deep .uni-table-th {
						font-size: 13px;
						color: #de3600;
						font-weight: 600;
					}

					::v-deep .uni-table-td {
						height: 56px !important;

					}

					.table_left {
						width: 20%;
						box-shadow: -5px 0px 5px #f4f4f4;
						/* 右侧阴影，垂直偏移量为0 */
						z-index: 3;

						::v-deep .uni-table-td {
							line-height: 40px;
							white-space: nowrap;
							/* 防止文字换行 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							text-align: center !important;
						}

						::v-deep .uni-table {
							min-width: 0 !important;
						}
					}

					.table_right {
						width: 80%;

						::v-deep .uni-table-td {
							text-align: center !important;
							line-height: 40px;
						}
					}
				}
			}
		}

		.team_item {
			// background-color: #fff;
			margin: 0 20px;

			.two_item,
			.three_item {
				margin-top: 10px;

				::v-deep .uni-section-header {
					padding: 0px !important;
				}

				::v-deep .u-textarea {
					border: 1px solid #d6d7d9;
				}

				.right_info {
					padding: 10px;
					background-color: #fff;
					border-radius: 15px;

					.title {
						font-weight: 600;
						padding-bottom: 5px;
						border-bottom: 1px solid #d6d7d9;

					}

					::v-deep .u-line {
						border-bottom-width: 0px !important;
					}




					// ::v-deep 
					::v-deep .u-form-item__body__left__content__label {
						color: #898989;
						font-size: 14px;
					}
				}

				.upload_item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.logo_item {
						margin: 10px 0;
						border-radius: 50%;
						background-size: 100% 100%;
						background-color: #5c79f6;
						height: 100px;
						width: 100px;
						position: relative;

						.icon-xiangji {
							position: absolute;
							right: 0;
							bottom: 0;
							padding: 5px;
							background-color: #fff;
							border-radius: 50%;
							border: 0.5px solid #ececec;
						}
					}

					.logo_title {
						color: #afafaf;
						font-size: 12px;
					}
				}
			}


		}
	}
</style>